<!DOCTYPE html>
<html>
<head>
    <title>文件上传</title>
</head>
<body>
<h1>文件上传</h1>
<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="file" id="fileInput">
    <button type="submit">上传</button>
</form>

<div id="message"></div>

<script>
    document.getElementById("uploadForm").addEventListener("submit", function(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        var fileInput = document.getElementById("fileInput");
        var file = fileInput.files[0]; // 获取选择的文件

        var formData = new FormData();
        formData.append("file", file); // 将文件添加到FormData对象中

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/api/upload"); // 设置请求方法和URL
        xhr.onload = function() {
            if (xhr.status === 200) {
                document.getElementById("message").textContent = "文件上传成功！";
            } else {
                document.getElementById("message").textContent = "文件上传失败！";
            }
        };
        xhr.send(formData); // 发送请求
    });
</script>
</body>
</html>
